// ---------------------------  切换两个盒子  --------------------------
$('.login a').on('click', function () {
    // 让登录的盒子隐藏; 让注册的盒子 显示；
    $('.login').hide().next().show();
});

$('.register a').on('click', function () {
    $('.login').show().next().hide();
})

// ---------------------------  完成注册功能  --------------------------
// 找到注册的表单，注册submit事件，阻止默认行为，收集账号密码，Ajax提交给接口
$('.register form').on('submit', function (e) {
    e.preventDefault();
    // 收集账号密码；serialize() 方法根据表单元素的name属性收集值
    let data = $(this).serialize();
    // console.log(data)
    // Ajax提交数据给接口
    $.ajax({
        type: 'POST',
        url: '/api/reguser',
        data: data,
        success: function (res) {
            // 无论成功还是失败都给出提示
            // alert(res.message);
            layer.msg(res.message);
            // 成功之后，清空输入框的值，并且切换到登录的盒子
            if (res.status === 0) {
                // 重置表单，言外之意，就是清空输入框的值
                $('.register form')[0].reset(); // [0]是把jQuery对象转成DOM对象，从而调用DOM方法
                // 切换到登录的黑子
                $('.login').show().next().hide();
            }
        }
    });
})

// ---------------------------  完成注册的表单验证规则  --------------------------
// 我们使用了 layui 的内置模块 - form；
// 使用layui的内置模块，必须先加载模块；加载的语法 let 变量 = layui.模块名;
let form = layui.form;

// 自定义验证规则
form.verify({
    // 键（验证规则）：值（验证方法（数组/函数））
    // len: ['正则表达式', '验证不通过时的提示信息']
    len: [/^\S{6,12}$/, '长度不行'], // {6,12} 不是 {6, 12}
    same: function (val) {
        // 形参表示使用该验证规则的输入框的值。目前，确认密码使用了这个验证规则；所以形参val表示输入的确认密码

        // 找到密码
        let pwd = $('.reg-pwd').val();
        if (pwd !== val) {
            // return '验证不通过时的提示'
            return '长得不一样'
        }
    }
});


// ---------------------------  完成登录功能  --------------------------
// 注册表单提交事件，阻止默认行为，收集用户名和密码，ajax提交。成功后，跳转到index.html
$('.login form').on('submit', function (e) {
    e.preventDefault();
    $.ajax({
        type: 'POST',
        url: '/api/login',
        data: $(this).serialize(),  // 使用 serialize，一定要检查表单元素的name属性
        success: function (res) {
            // 无论成功还是失败，提示一下
            layer.msg(res.message);
            // 成功后，跳转到index.html
            if (res.status === 0) {
                // 把token保存到本地存储
                localStorage.setItem('token', res.token);
                location.href = '/index.html';
            }
        }
    });
})